<template>
    <div class="classify">
        <Header :title="title"></Header>
        <aside class="navlist">
            <ul>
                <li v-for="(item,i) in navLists" :key="i" @click="chage(i,(stationId ? stationId : 22))" :class=" firstSaleTypeId == navIndex[i] ? 'active' : '' ">
                    <p>{{item.sName}}</p>
                </li>
            </ul>
        </aside>
        <div class="content" v-for="(item,i) in navLists" :key="i" :style=" firstSaleTypeId == navIndex[i] ? 'display:block' : 'display:none' ">
            <div class="item">
                <p class="title">{{item.sName}}</p>
                <div class="goods" v-for="(item,index) in navLists[i].stationSaleTypeModels" :key="index">
                    <img :src="item.sPic" alt="logo">
                    {{item.sName}}
                </div>
            </div>
            <div class="logo">
                <p>热门品牌</p>
                <div class="logos" v-for="(item,index) in logos" :key="index">
                    <img :src="item.logoUrl" alt="logo">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Swiper from 'swiper'; 
import 'swiper/dist/css/swiper.min.css';
import BScroll from "better-scroll";
import api from '../../utils/api';
import store from '../../store';
import qs from 'qs';
import Header from '@/components/Header.vue'
export default {
    name: "classify",
    components: {
        Header,
    },
    data(){
        return {
            title: "商品分类",
            navLists: [],
            navIndex: [],
            firstSaleTypeId: "",
            logos: [],
            stationId: "",
        }
    },
    methods:{
        chage(i,stationId){
            var that = this;
            that.firstSaleTypeId = that.navIndex[i];
            api.post("/getBrandInfo",qs.stringify({
                firstSaleTypeId: that.firstSaleTypeId,
                num: 100,
                stationId: that.stationId
            }),"post")
            .then(res=>{
                if(res.data.status.statusCode === 0){
                    console.log(res)
                    that.logos = res.data.result;
                }else{
                    console.log(res)
                }
            })
        }
    },
    mounted(){
        var that = this;
        var stationId = that.$store.state.loginInfo.stationId
        if(typeof stationId == "undefined" && that.$store.state.token){
            that.stationId = JSON.parse(that.$store.state.loginInfo).stationId;
        }else if(stationId){
            that.stationId = stationId;
        }else{
            that.stationId = 22;
        }
        api.post("/getSortInfoByStationIdV2/"+that.stationId,{},"post")
        .then(res=>{
            if(res.data.status.statusCode === 0){
                that.navLists = res.data.result.list;
                for(let i = 0; i < that.navLists.length; i++){
                    that.navIndex.push(res.data.result.list[i].id);
                }
                that.chage(0,that.stationId)
            }else{
                console.log(res)
            }
        })
        .catch(err => {
            
        })
    },
}
</script>

<style lang="scss" scoped>
.classify{
    position: relative;
    .navlist{
        width: .96rem;
        line-height: .14rem;
        background-color: #f2f2f2;
        font-size: .14rem;
        float: left;
        color: #666666;
        ul{
            width: .96rem;
            height: 5.75rem;
            white-space: nowrap;
            overflow-y: auto;
            li{
                padding: .18rem .13rem;
                position: relative;
                p{
                    width: .7rem;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            li:after{
                content: "";
                width: 100%;
                height: .01rem;
                position: absolute;
                bottom: 0;
                left: 0;
                background-color: #fff;
            }
            .active{
                color: #d33;
                background-color: #fff;
                
            }
            // li:before{
            //     content: "";
            //     width: .02rem;
            //     height: 90%;
            //     position: absolute;
            //     top: .02rem;
            //     left: 0;
            //     background-color: #d33;
            //     display: none;
            // }
        }
    }
    .content{
        width: 2.5rem;
        padding: .14rem;
        float: left;
        position: absolute;
        top: .44rem;
        left: .96rem;
        display: none;
        .item{  
            width: 100%;
            overflow: hidden;
            margin-bottom: .14rem;
            .title{
                font-size: .14rem;
                text-align: left;
            }
            .goods{
                width: .8rem;
                height: .9rem;
                font-size: .12rem;
                text-align: center;
                font-weight: 600;
                float: left;
                >img{
                    width: .65rem;
                    height: .6rem;
                    margin: .04rem;
                }
            }
        }
        .logo{
            width: 100%;
            overflow: hidden;
            >p{
                font-size: .14rem;
                text-align: left;
            }
            .logos{
                width: .7rem;
                height: .7rem;
                border: .01rem solid #eee;
                border-radius: .02rem;
                margin-right: .1rem;
                float: left;
                img{
                    width: .7rem;
                    height: .7rem;
                }
            }
        }
    }
}
</style>
